<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="vue.js"></script>
</head>
<body>
  <div id="app">
    <my-parent></my-parent>
  </div>
</body>
<template id="parent">
  <div>
    父组件
    <!-- 父组件在调用子组件的地方，添加一个自定义的属性 money -->
    <!-- 属性的值就是传递给子组件的值 1000 -->
    <!-- 变量 / boolean / number ----- 绑定属性 -->
    <my-son :money="1000" :msg="msg" :list="[1,2,3]" :obj="obj"></my-son>
    <my-son :msg="msg"></my-son>
  </div>
</template>
<template id="son">
  <div>
    子组件
    <!-- 可以使用自定义的属性名 渲染 -->
    <h6>我是子组件 - {{ msg }} --- {{ money }} --- {{ list }}
        {{obj.name}} {{obj.age}}
    </h6>
  </div>
</template>
<script>
  const Son = {
    props: {
      money: {
        type: Number,
        required: true,
        default: 500
      },
      msg: String,
      list: {
        type: Array,
        default () {
          return [6,7,8]
        }
      },
      obj: {
          type:Object,
          default() {
              return {name:'cyj',age:25}
          }
      }
    },
    template: '#son'
  }
  const Parent = {
    template: '#parent',
    data () {
      return {
        msg: '父 === 》 子',
        obj: {
            name: 'lmx',
            age: 24
        }
      }
    },
    components: {
      'my-son': Son
    }
  }

  new Vue({
    el: '#app',
    components: {
      'my-parent': Parent
    }
  })
</script>
</html>